<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-for="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml" lang="en">

<head>
    <meta charset="utf-8"/>
    <title>传图识字-高精度识别</title>
</head>

<body class="pg">
<div class="page" id="app">
    <el-upload
            class="upload-demo"
            drag
            action="/ocr/highPrecisionImageRecognition"
            multiple
            :on-success="handle_success">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>

    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
                prop="words"
                label="结果">
        </el-table-column>
    </el-table>
</div>

<!--前端使用vue-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.0-alpha.4/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    let vue = new Vue({
        el:"#app",
        data:{
            tableData:[]
        },
        methods:{
            tableRowClassName({row, rowIndex}) {
               if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            },
            handle_success(res) {
                if (res.success) {
                    console.log(res.data.words_result)
                    this.tableData = res.data.words_result
                } else {
                    alert("解析失败，请检查图片是否正常")
                }
            }
        }
    });

</script>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

</body>
</html>